<template>
	<view class="pageuser">
		<view class="homebg">
			<image class="homebgimg" src="../../static/images/yhbg.png" mode=""></image>
		</view>
		<view class="user-cont">
			<view class="header" :style="{'height':(totalHeight||50)+'px','padding-top':statusBarHeightRef+'px'}">
				我的
			</view>
			<view class="user-info">
				<view class="tx">
					<image class="img-cont" src="../../static/images/loginuser.png" mode="" v-if="!userInfo"
						@click="handleGoLogin"></image>
					<image class="img-cont" :src="userInfo.logo" v-else></image>
				</view>
				<view class="info">
					<view class="isLogin" v-if="userInfo">
						<view class="name">
							{{userInfo.nickname}}
						</view>
						<view class="yue">
							余额：{{formatNumber(userwallet?.price||0)}}
						</view>
					</view>

					<view class="noLogin" v-else @click="handleGoLogin">
						登录/注册
					</view>

				</view>
				<view class="ma" v-if="userInfo" @click="handleShowMa">
					<view class="icon">
						<image class="img-cont" src="../../static/images/fkm.png" mode=""></image>
					</view>
					<view class="text">
						付款码
					</view>
				</view>
			</view>

			<view class="cantiar">
				<view class="order-cont">
					<view class="item" @click="handleGoOrder(0)">
						<view class="imgcont">
							<image src="../../static/images/fukuan.png" mode=""></image>
						</view>
						<view class="text">
							全部
						</view>
					</view>
					<view class="item" @click="handleGoOrder(1)">
						<view class="imgcont">
							<image src="../../static/images/quhuo.png" mode=""></image>
						</view>
						<view class="text">
							待收货
						</view>
					</view>
					<view class="item" @click="handleGoOrder(2)">
						<view class="imgcont">
							<image src="../../static/images/wancheng.png" mode=""></image>
						</view>
						<view class="text">
							已完成
						</view>
					</view>
					<view class="item" @click="handleGoOrder(3)">
						<view class="imgcont">
							<image src="../../static/images/tuikuan.png" mode=""></image>
						</view>
						<view class="text">
							退款/售后
						</view>
					</view>
				</view>

				<view class="caidan">
					<view class="caidan-cont" v-for="(item,index) in caidanList" :key="index">
						<view class="caidan-item" @click="handleRoute(item.path,true)" v-if="item.path!=='share'">
							<view class="icon">
								<image class="icon-img" :src="`../../static/images/${item.icon}.png`" mode=""></image>
							</view>
							<view class="text">
								{{item.name}}
							</view>
						</view>
						<button v-else class="caidan-item" open-type="share">
							<view class="icon">
								<image class="icon-img" :src="`../../static/images/${item.icon}.png`" mode=""></image>
							</view>
							<view class="text">
								{{item.name}}
							</view>
						</button>
					</view>

				</view>

				<!-- <view class="gn">
					<view class="gn-item" v-for="(item,index) in gnList" :key="index">
						<view class="icon">
							<image class="icon-img" :src="`../../static/images/${item.icon}.png`" mode=""></image>
						</view>
						<view class="text">
							{{item.name}}
						</view>
					</view>
				</view> -->

				<view class="ggl">
					<!-- <view class="ggl-item" @click="handleRoute('/pagesA/store/store')">
						<view class="label">
							我的门店
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="##2E2D2D" size="20"></u-icon>
						</view>
					</view> -->
					<view class="ggl-item" @click="handleRoute('/pages/address/address',true)">
						<view class="label">
							我的地址
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#2E2D2D" size="14"></u-icon>
						</view>
					</view>
					<view class="ggl-item" @click="handleRoute('/pagesA/xieyi/xieyi?status=1')">
						<view class="label">
							用户政策
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#2E2D2D" size="14"></u-icon>
						</view>
					</view>
					<view class="ggl-item" @click="handleRoute('/pagesA/xieyi/xieyi?status=2')">
						<view class="label">
							隐私协议
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#2E2D2D" size="14"></u-icon>
						</view>
					</view>
					<view class="ggl-item">
						<view class="label">
							关于我们
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#2E2D2D" size="14"></u-icon>
						</view>
					</view>
				</view>

				<view class="btn" @click="handleLogout" v-if="userInfo">
					退出登录
				</view>

			</view>
		</view>
		<u-modal :show="showErwema" title="付款码" :showCancelButton="true" cancelText='关闭' @cancel="handleCloseMa"
			:showConfirmButton="false">
			<view class="slot-content">
				<view class="logoMa">
					<image class="img" :src="userInfo?.fukuanma" mode="widthFix"></image>
				</view>
			</view>
		</u-modal>
		<Tabbar :slectIndex="3"></Tabbar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import handleCache from "@/utils/cache.js"
	import formatNumber from '@/utils/formatNumber.js'
	import {
		userApi,
		commonApi
	} from '@/api/index.js'

	import Tabbar from '@/components/tabbar/tabbar.vue'
	const totalHeight = ref(0)
	const statusBarHeightRef = ref(0)
	const showErwema = ref(false)
	const caidanList = ref([
		// {
		// 	name: '股东中心',
		// 	icon: 'icon-gdzx',
		// 	path: '/pagesA/shareholder/shareholder'
		// },
		{
			name: '余额明细',
			icon: 'icon-yemx',
			path: '/pagesA/balance/balance'
		},

		{
			name: '优惠券',
			icon: 'icon-yhq',
			path: '/pages/coupon/coupon'
		},
		{
			name: '充值',
			icon: 'icon-cz',
			path: '/pagesA/recharge/recharge?type=1'
		},
		{
			name: '充值购订单',
			icon: 'paygo',
			path: '/pagesA/rechargeorder/rechargeorder'
		},
		{
			name: '分享好友',
			path: 'share',
			icon: 'icon-fxhy'
		},
	])
	const gnList = ref([{
			name: '代充值',
			icon: 'icon-dcz'
		},
		{
			name: '代扣余额',
			icon: 'icon-dkye'
		},
		{
			name: '扫码收款',
			icon: 'icon-smsk'
		},
		{
			name: '朋友圈素材',
			icon: 'icon-pyq'
		},
		{
			name: '核销提货',
			icon: 'icon-hx'
		},
		{
			name: '店员管理',
			icon: 'icon-dygl'
		}
	])

	const userInfo = ref()
	const userwallet = ref()
	onLoad(() => {
		//#ifndef H5
		uni.getSystemInfo({
			success: res => {
				console.log(res, 88888)
				let menu = uni.getMenuButtonBoundingClientRect()
				let statusBarHeight = res.statusBarHeight
				let menuHeight = menu.height
				let menuTop = menu.top
				let navigatorHeight = (menu.top - res.statusBarHeight) * 2 + menu.height
				totalHeight.value = statusBarHeight + navigatorHeight
				statusBarHeightRef.value = statusBarHeight

			}
		})
		//#endif

	})

	onShow(() => {
		uni.hideTabBar()
		let data = handleCache.get('userInfo')
		userInfo.value = data
		if (userInfo.value) {
			getuserwallet()
		}
	})
	const handleGoLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})

	}

	const getuserwallet = () => {
		let req = {
			uid: userInfo.value.id,
			shanghuid: userInfo.value.shanghuid
		}
		commonApi.userwallet(req).then((res) => {
			userwallet.value = res.data

		})
	}
	const handleRoute = (path, haveLogin) => {
		if (!path) {
			return
		}
		if (haveLogin) {
			let data = handleCache.get('userInfo')
			if (!data) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				uni.navigateTo({
					url: path
				})
			}
		} else {
			uni.navigateTo({
				url: path
			})
		}

	}
	const handleGoOrder = (status) => {
		let data = handleCache.get('userInfo')
		if (!data) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		} else {
			uni.switchTab({
				url: '/pages/order/order?status=' + status
			})
		}
	}
	const handleLogout = () => {
		uni.showLoading({
			title: ''
		})
		handleCache.remove('userInfo')
		const pages = getCurrentPages()
		const curPage = pages[pages.length - 1]
		curPage.onLoad() // 传入参数
		curPage.onShow()
		curPage.onReady()
		uni.hideLoading()
	}
	const handleShowMa = () => {
		showErwema.value = true
	}
	const handleCloseMa = () => {
		showErwema.value = false
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>